<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-04-22 15:11:00
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-03 09:22:38
 * @FilePath: /things-admin/src/view/health/health.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header">
      <Button type="primary" icon="md-grid" @click="excelData">导出</Button>
      <Input
        style="width: 200px; margin: 0 10px"
        type="text"
        placeholder="设备编号"
        v-model="deviceSn"
      />
      <!-- <Input
        style="width: 200px; margin: 0 10px 0 0"
        type="text"
        placeholder="ID"
        v-model="id"
      />
      <Input
        style="width: 200px; margin: 0 10px 0 0"
        type="text"
        placeholder="心率"
        v-model="hr"
      />
      <Input
        style="width: 200px; margin: 0 10px 0 0"
        type="text"
        placeholder="微循环"
        v-model="hrv"
      /> -->
      <Button type="primary" @click="searchData" icon="ios-search">查询</Button>
      <Button
        icon="md-refresh"
        style="margin-left: 10px"
        size="default"
        @click="resetData"
        >重置</Button
      >
    </div>
    <div class="body">
      <Table border :columns="columns" :data="data"> </Table>
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <div></div>
        <!-- 使用element分页组件的原因是iview分页组件有缺陷 -->
        <el-pagination
          background
          :current-page="pageIndex"
          :total="total"
          @current-change="changeSizeValue"
          :page-size="pageSize"
          @size-change="changePageSize"
          page-count
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { health } from "@/base/api/HealthApi";
import axios from "axios";
import { settings } from "@/config/Settings";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      id: "",
      hr: "",
      deviceSn: "",
      hrv: "",
      columns: [
        {
          title: "ID",
          key: "id",
          width: 200
        },
        // {
        //   title: "成员Id",
        //   key: "affiliateId",
        //   width: 200,
        // },

        // {
        //   title: "公司ID",
        //   key: "companyId",
        //   width: 100,
        // },
        {
          title: "创建时间",
          key: "created",
          width: 200
        },
        // {
        //   title: "设备ID",
        //   key: "deviceId",
        //   width: 200,
        // },
        {
          title: "设备编号",
          key: "deviceSn",
          width: 200
        },
        {
          title: "心率",
          key: "hr"
        },
        {
          title: "微循环",
          key: "hrv"
        },
        {
          title: "疲劳指数",
          key: "arr"
        },
        // {
        //   title: "pbf",
        //   key: "pbf",
        //   width: 100,
        // },
        // {
        //   title: "pbw",
        //   key: "pbw",
        //   width: 100,
        // },
        {
          title: "血氧",
          key: "qt"
        },
        {
          title: "健康得分",
          key: "score"
        }
      ],
      data: []
    };
  },
  methods: {
    searchData() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getHealthData();
    },
    // 查询健康信息接口数据
    getHealthData() {
      this.data = [];
      let params = {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        affiliateId: this.$route.params.id || 0,
        deviceSn: this.deviceSn
      };
      health(params)
        .then(res => {
          this.data = res.data.items;
          // this.data = this.data.reverse();
          this.total = res.data.itemCount;
          // console.log(this.data);
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    // 导出健康数据接口
    excelData() {
      const url = `${
        process.env.NODE_ENV === "development"
          ? settings.baseUrl.dev
          : settings.baseUrl.pro
      }/api/health/exportExcel`;
      const config = {
        responseType: "blob",
        headers: {
          Authorization: `Bearer ${Cookies.get("accessToken")}`
        }
      };
      axios
        .get(url, config)
        .then(response => {
          // console.log(response.data);
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "member.xlsx");
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error("导出失败", error);
        });
    },
    // searchData查询

    // 重置
    resetData() {
      this.pageSize = 10;
      this.pageIndex = 1;
      this.deviceSn = "";
      this.getHealthData();
    },

    changeSizeValue(data) {
      // console.log(data)
      this.pageSize = 10;
      this.pageIndex = data;
      this.getHealthData();
    },

    changePageSize(data) {
      this.pageIndex = 1;
      this.pageSize = data;
      this.getHealthData();
      this.getHealthData()
    }
  },
  mounted() {
    this.getHealthData();
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 66px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.body {
  margin-top: 20px;
}
</style>
